<template>
  <div class="my_order">
    <div class="my_order_list">
      <div class="filter-container">
        <!--表头搜索功能-->
        <el-input v-model="listQuery.myOrderNo"
                  placeholder="订单编号" style="width: 100px;"
                  class="filter-item"
                  @keyup.enter.native="handleFilter"/>
        <el-select v-model="listQuery.status"
                   placeholder="订单状态"
                   clearable class="filter-item"
                   style="width: 130px">
          <el-option v-for="item in calendarTypeOptions"
                     :key="item.key"
                     :label="item.display_name"
                     :value="item.key"/>
        </el-select>
        <el-date-picker
          v-model="listQuery.createdDate"
          type="datetime"
          placeholder="订单日期"
          class="filter-item"
        />
        <el-button v-waves
                   class="filter-item"
                   type="primary"
                   icon="el-icon-search"
                   @click="handleFilter"
        >
          搜索
        </el-button>
      </div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column label="ID"
                         prop="id"
                         sortable="custom"
                         align="center"
                         width="60"
                         :class-name="getSortClass('id')">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单编号"
                         prop="myOrderNo"
                         sortable="custom"
                         align="center"
                         width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.myOrderNo}}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单金额"
                         prop="totalPrice"
                         sortable="custom"
                         align="center"
                         width="100">
          <template slot-scope="scope">
            <span>￥{{ scope.row.totalPrice}}</span>
          </template>
        </el-table-column>


        <el-table-column label="订单配送"
                         prop="peiSong"
                         sortable="custom"
                         align="center"
                         width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.peiSong}}</span>
          </template>
        </el-table-column>


        <el-table-column label="微信支付编号"
                         prop="wechatNo"
                         sortable="custom"
                         align="center"
                         width="140">
          <template slot-scope="scope">
            <span>{{ scope.row.wechatNo}}</span>
          </template>
        </el-table-column>

        <el-table-column label="运费"
                         prop="yunFee"
                         sortable="custom"
                         align="center"
                         width="100">
          <template slot-scope="scope">
            <span>￥{{ scope.row.yunFee}}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单日期"
                         prop="createDate"
                         sortable="custom"
                         align="center"
                         width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate}}</span>
          </template>
        </el-table-column>


        <el-table-column label="订单状态"
                         prop="stateName"
                         sortable="custom"
                         align="center"
                         width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.stateName}}</span>
          </template>
        </el-table-column>


        <el-table-column label="操作"
                         align="center"
                         width="200"
                         class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="primary"
                       size="mini"
                       @click="handleUpdate(row)">
              详情
            </el-button>
            <el-button v-if="row.status!='deleted'"
                       size="mini"
                       type="danger"
                       @click="handleModifyStatus(row,'deleted')">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.page"
                  :limit.sync="listQuery.limit"
                  @pagination="getList"/>

    </div>
  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import ajax from '@/utils/baseurl'
  import Pagination from '@/components/Pagination'

  var p
  export default {
    name: 'orderManagement',
    directives: { waves },
    components: { Pagination},
    data() {
      return {
        temp: {
          id:'',
          createDate:'',
          myOrderNo:'',
          peiSong:'',
          totalPrice:'',
          wechatNo:'',
          yunFee:'',
          stateName:'',
        },
        calendarTypeOptions: [
          { key: 1, display_name: '待支付' },
          { key: 2, display_name: '待取货' },
          { key: 3, display_name: '待发货' },
          { key: 4, display_name: '待评价' },
          { key: 5, display_name: '待退款' },
          { key: 6, display_name: '已退款' },
          { key: 7, display_name: '订单完结' }
        ],
        total: 0,
        tableKey: 0,
        list: null,
        listLoading: false,
        downloadLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          myOrderNo: '',
          createdDate: '',
          status:'',
        },
      }
    },
    created() {
      p = this
      this.getList()
    },
    methods: {
      getList() {
        console.log(p.listQuery)
        this.listLoading = true
        ajax('order/getPage', p.listQuery, function(res) {
          console.log(res)
          res=JSON.parse(res)
          p.list = res.page.list
          //page limit赋值
          p.total = parseInt(res.page.totalCount)
          p.listLoading = false
        })
      },
      sortChange(data) {

      },
      handleFilter() {
        p.listQuery.page = 1
        p.getList()
      },
      handleCreate() {
      },
      handleDownload() {

      },
      getSortClass: function(key) {

      }

    }
  }
</script>
